<template>
  <div style="margin-bottom: 60px">
    <van-sticky>
      <div class="topTab">
        <div style="width: 80vw; display: flex; align-items: center">
          <van-icon name="manager-o" size="30" />
          <van-tabs v-model="active" animated>
            <van-tab
              v-for="(item, index) in ['关注', '推荐']"
              :key="index"
              :title="item"
            >
            </van-tab>
          </van-tabs>
        </div>

        <!-- <van-icon name="bullhorn-o" size="30" /> -->
      </div>
    </van-sticky>

    <!-- 米圈内容 -->
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
      v-show="active === 1"
    >
      <!-- <van-cell v-for="item in list" :key="item" :title="item" /> -->

      <van-skeleton title avatar :row="3" :loading="!miList" />
      <van-skeleton title avatar :row="3" :loading="!miList" />
      <van-skeleton title avatar :row="3" :loading="!miList" />
      <van-skeleton title avatar :row="3" :loading="!miList" />
      <van-skeleton title avatar :row="3" :loading="!miList" />
      <van-skeleton title avatar :row="3" :loading="!miList" />
      <van-skeleton title avatar :row="3" :loading="!miList" />
      <van-skeleton title avatar :row="3" :loading="!miList" />
      <van-skeleton title avatar :row="3" :loading="!miList" />
      <van-skeleton title avatar :row="3" :loading="!miList" />

      <div
        class="ListItem"
        v-for="(item, index) in miList"
        :key="index"
        @click="toDetail(item.content.id)"
      >
        <div class="userInfo">
          <img :src="item.content?.icon" alt="" />
          <div class="username">{{ item.content?.nickname }}</div>
        </div>
        <div class="content">{{ item.content?.content }}</div>
        <div class="showImg">
          <img
            v-for="(img, index) in item.content?.pic_list"
            :key="index"
            :src="img.img"
            alt=""
          />
        </div>

        <!-- 图标 -->
        <div class="btnIcon">
          <div><van-icon name="share-o" size="20" /></div>
          <div style="display: flex; align-items: center">
            <van-icon name="chat-o" size="20" />
            <span>{{ item?.content.comment_num }}</span>
          </div>
          <div style="display: flex; align-items: center">
            <van-icon name="good-job-o" size="20" /><span>{{
              item?.content.praise_num
            }}</span>
          </div>
        </div>
      </div>
    </van-list>
    <div v-show="active === 0">
      <van-empty description="暂无关注" />
    </div>
  </div>
</template>





<script>
import { getmiquan } from "@/api/index";
export default {
  data() {
    return {
      active: 1,
      miList: null,
      // 触底
      loading: false,
      GJloading: false,
      finished: false,
    };
  },
  methods: {
    getMIList() {
      getmiquan().then((res) => {
        console.log(res.data.data.rec_list);
        this.miList = res.data.data.rec_list;
      });
    },
    onLoad() {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      setTimeout(() => {
        if (this.miList) {
          this.miList = [...this.miList, ...this.miList];
        }

        // 加载状态结束
        this.loading = false;
        this.GJloading = false;
      }, 1000);
    },
    toDetail(id) {
      if (id !== 0) {
        this.$router.push({ path: "/miquandetal", query: { id: id } });
      }
    },
  },
  created() {
    this.GJloading = true;
  },
  activated() {
    this.getMIList();
  },
};
</script>






<style lang="less" scoped>
.topTab {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 15rem;
  background-color: #ffffff;
  border-bottom: 1px solid #f5f5f5;
}

.van-tabs {
  width: 40%;
  color: #333;
  font-weight: 700;
}

.ListItem {
  padding-top: 15rem;
  margin-bottom: 15rem;
  padding: 11.5rem;

  &::after {
    margin-left: -12rem;
    margin-right: -12rem;
    display: block;
    content: "";
    width: 100vw;
    border-bottom: 6rem solid #f6f6f6;
  }

  .userInfo {
    display: flex;
    align-items: center;
    margin: 10rem 0;

    img {
      margin-right: 8rem;
      width: 26rem;
      height: 26rem;
      border-radius: 26rem;
      overflow: hidden;
    }

    .username {
      font-size: 12rem;
      font-weight: 500;
      color: #161616;
      line-height: 1.4;
    }
  }

  .content {
    font-size: 15rem;
    font-weight: 500;
    color: #161616;
    line-height: 1.6;
    word-wrap: break-word;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .showImg {
    margin: 10rem 0;
    display: flex;
    flex-wrap: wrap;
    border-radius: 10px;
    overflow: hidden;

    img {
      width: 30%;
      height: 110.5rem;
      overflow: hidden;
      object-fit: cover;
      padding: 5rem;
    }
  }

  .btnIcon {
    width: 100%;
    display: flex;
    justify-content: space-around;
    padding: 8px 0;

    span {
      font-size: 12rem;
      font-weight: 500;
      color: #757575;
      margin-left: 4px;
    }
  }
}
</style>